<template>
  <!--  closeable -->
  <van-popup :show="show" round safe-area-inset-bottom  position="bottom" @click-overlay="show = false"
    @close="show = false">
    <view class="publish_mask flex_b_c">
      <view class="publish_icon" @click="onLink('/pages/ipElite/publishRecruit')">
      发布招募
      </view>
      <view class="publish_icon publish1" @click="onLink('/pages/ipElite/publishRepWork')">发布代表作品</view>
    </view>
    <!-- <view class="title pt-60">发布资源</view>
    <view class="publish_mask flex_b_c">
      <navigator class="publish_icon" url="/pages/work/publish/index" hover-class="none">发布版权作品</navigator>
      <navigator class="publish_icon publish1" url="/pages/ipElite/publishRepWork" hover-class="none">发布代表作品</navigator>
      <view class="publish_icon publish2">发布项目</view>
      <navigator class="publish_icon publish3" url="/pages/ipElite/publishRepWork" hover-class="none">发布代表作品</navigator>
    </view>
    <view class="title">发布需求</view>
    <view class="publish_mask flex_b_c pb-120">
      <navigator class="publish_icon" url="/pages/work/publish/publishCollect" hover-class="none">发布采购作品</navigator>
      <navigator class="publish_icon publish4" url="/pages/ipElite/publishRecruit" hover-class="none">发布招募</navigator>
      <navigator class="publish_icon publish2" url="/pages/project/publishCollect" hover-class="none">发布征集项目</navigator>
      <navigator class="publish_icon publish3" url="/pages/dynamic/publish" hover-class="none">发布动态</navigator>
    </view> -->
  </van-popup>
  <view class="tabbar flex_b_c">
    <view class="tabbar_item flex1 flex_center" v-for="(item, idx) in list" :key="item.pagePath" @click="onChange(idx)">
      <image :style="{ width: `${item.iconWidth}rpx`, height: `${item.iconHeight}rpx` }"
        :src="`https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/${active === idx ? item.selectIconPath : item.iconPath}.png`" />
      <view v-if="item.text" class="tabbar_txt">{{ item.text }}</view>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, computed } from 'vue'
const { appContext: { config: { globalProperties: { $storage } } } } = getCurrentInstance();
import { useStore } from "vuex";
let store = useStore()
let userInfo = uni.getStorageSync('info')
let isLogin = ref($storage.getStorage('regiterFlag') === 0 ? true : false)

let show = ref(false) // 显示弹层
let active = computed({
  get() {
    return store.state.tabIndex
  },
  set(newval) {
  }
})
let list = reactive([
  {
    "pagePath": "/pages/message/index",
    "iconPath": "message_normal",
    "selectIconPath": "message_active",
    "text": "消息",
    "iconWidth": 40,
    "iconHeight": 40,
  },
  {
    "pagePath": "/pages/center/index",
    "iconPath": "center_normal",
    "selectIconPath": "center_active",
    "text": "我的",
    "iconWidth": 40,
    "iconHeight": 40,
  }

])
let onChange = idx => {
  store.commit('setTabIndex', idx)
  if (list[idx].pagePath) {
    uni.switchTab({
      url: list[idx].pagePath,
      success: () => {
      }
    })
  } else {
    show.value = true
  }
}
let onLink = url => {
  if (!isLogin.value) {
    uni.navigateTo({
      url: '/pages/login/index'
    })
    return false
  }
  uni.navigateTo({
    url
  })
  show.value = false
}
</script>
<style lang="scss" scoped>
.tabbar {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  z-index: 100000;
  height: 98rpx;
  box-sizing: content-box;
  background: #FFFFFF;
  box-shadow: 0px 2rpx 10rpx 0px rgba(0, 0, 0, 0.2);

  .tabbar_item {
    flex-direction: column;

    .tabbar_txt {
      margin-top: 10rpx;
      font-size: 24rpx;
      height: 20rpx;
      line-height: 20rpx;
      font-weight: 400;
      font-family: pf_regular;
      color: #999999;
    }
  }
}

.title {
  padding-left: 30rpx;
  padding-bottom: 40rpx;
  line-height: 40rpx;
}

.publish_mask {
  padding: 67rpx 26rpx 118rpx 20rpx;
  flex-wrap: wrap;

  .publish_icon {
    width: 338rpx;
    height: 156rpx;
    line-height: 156rpx;
    margin-bottom: 24rpx;
    background: url('https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/publish_recruit_bg.png') no-repeat left top/ cover;
    padding-left: 35rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #FFFFFF;

    &.publish1 {
      background-image: url('https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/publish_repworks_bg.png')
    }

    // &.publish2 {
    //   background-image: url('https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/publish_project.png')
    // }

    // &.publish3 {
    //   background-image: url('https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/publish_dynamic.png')
    // }

    // &.publish4 {
    //   background-image: url('https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/publish_recruit.png')
    // }
  }
}
</style>